<div class="content-area">
  <div id="network"
       #network></div>
</div>
<clr-vertical-nav [clrVerticalNavCollapsible]="true"
                  class="nav-trigger--bottom">

  <a clrVerticalNavLink>
    <h6>专精
      <span class="monospace"
            *ngIf="ms.game.allMateries.masteryPoint > 0">{{ms.game.allMateries.masteryPoint}}</span>
    </h6>
  </a>
  <div *ngIf="!node; else buy">
    <a clrVerticalNavLink
       id="infoStart"
       *ngIf="list.length ==0">
      <clr-alert [clrAlertType]="'alert-success'"
                 [clrAlertClosable]="false">
        <clr-alert-item>
          <span class="alert-text">
            Start on one green node.
          </span>
        </clr-alert-item>
      </clr-alert>
    </a>
    <a clrVerticalNavLink
       *ngFor="let desc of list; trackBy:getDescId">
      {{desc}}
    </a>
  </div>
  <ng-template #buy>
    <p clrVerticalNavLink>{{node.label}}</p>
    <button class="btn btn-success-outline"
            *ngIf="node.available && !node.owned"
            [disabled]="ms.game.allMateries.masteryPoint <1"
            (click)="buyMastery()">
      购买
    </button>
  </ng-template>
  <button class="btn btn-warning-outline"
          *ngIf="ms.game.allMateries.totalEarned > 0 && (ms.game.allMateries.totalEarned != ms.game.allMateries.masteryPoint )"
          (click)="showReset = true">
    重置
  </button>



  <!-- Debug Stuff -->
  <!-- <button class="btn"
          (click)="export()">
    Export positions
  </button>
  <textarea name="raw"
            [(ngModel)]="exp"
            rows="1"></textarea> -->

</clr-vertical-nav>


<clr-modal [(clrModalOpen)]="showReset"
           [clrModalClosable]="true">
  <h3 class="modal-title">专精重置</h3>
  <div class="modal-body">
    <p>
      重置专精升级，你可以获得专精点数 {{ms.game.allMateries.totalEarned}}
      <br />
      你将移动到基础世界而没有任何奖励。
    </p>
  </div>
  <div class="modal-footer">
    <button type="button"
            class="btn btn-outline"
            (click)="showReset = false">取消</button>
    <button type="button"
            class="btn btn-primary"
            (click)="reset()">重置</button>
  </div>
</clr-modal>
